<script setup lang="ts">
import { reactive, ref } from "vue";
import { useJxtechPageTableExt } from "@/comp-ext";
import { JxtechTableColumn } from "@whjxtech/jxtech-component";
import roleConflictServiceApi from "@/api/modules/org/bean/role-conflict";
import RoleconflictFormDialog from "./role-conflict-form-dialog.vue";

type RoleConflictListProps = {
  roleId: string;
};

const props = defineProps<RoleConflictListProps>();

//定义表格ref对象
const JxtechPageTableRef = ref();
const RoleconflictFormDialogRef = ref();
//获取表格加载方法
const { loadTable, deleteSelectionDataList } = useJxtechPageTableExt(JxtechPageTableRef);
//列配置
const tableColumn: JxtechTableColumn[] = [
  { label: "序号", width: "50", type: "selection" },
  { label: "序号", width: "80", type: "index" },
  { prop: "roleid2Name", label: "互斥角色" },
  { prop: "conflictDesc", label: "互斥描述" }
];
//加载数据方法
const loadTableData = (queryParams: any) =>
  roleConflictServiceApi.queryPage({ refCols: "default" }, { ...queryParams, roleId: props.roleId });

const deleteTableData = () => {
  deleteSelectionDataList(roleConflictServiceApi);
};

const RoleconflictFormDialogState = reactive({
  visible: false,
  openDialog() {
    RoleconflictFormDialogState.visible = true;
  },
  onSaveSuccess() {
    loadTable();
  }
});
defineExpose({
  loadTable: () => loadTable()
});
</script>
<template>
  <JxtechBasicCard
    title="角色互斥"
    help-message="当角色与其他角色配置了角色互斥以后，角色与互斥角色不能同时赋予同一个用户或者部门"
  >
    <template #titleExtra>
      <JxtechAddButton @click="RoleconflictFormDialogState.openDialog"></JxtechAddButton>
      <JxtechDeleteButton @click="deleteTableData"></JxtechDeleteButton>
    </template>
    <JxtechPageTableExt
      ref="JxtechPageTableRef"
      row-key="roleid2"
      :table-column="tableColumn"
      :load-data="loadTableData"
      style="width: 100%"
      height="250"
    >
    </JxtechPageTableExt>
  </JxtechBasicCard>
  <RoleconflictFormDialog
    ref="RoleconflictFormDialogRef"
    v-if="RoleconflictFormDialogState.visible"
    :role-id="roleId"
    v-model:visible="RoleconflictFormDialogState.visible"
    @save-success="RoleconflictFormDialogState.onSaveSuccess"
  ></RoleconflictFormDialog>
</template>
<style scoped lang="scss"></style>
